<template>
  <el-card class="shopHome">
    <el-card class="shop-banner">
      <div v-if="isManage" class="admin-btn">
        <router-link to="/portal/shop/pushProduct"><el-button>发布产品</el-button></router-link>
      </div>
    </el-card>
    <el-card class="shop-home-body">
      <el-card  v-for="item in waresList.slice(0,10)" :key="item.productNumber" class="wares">
        <div class="wares-introduction">
          <div class="introduction-img">
            <img v-if="item.cover" :src="getDownloadUrl(item.cover)">
            <i v-else class="default-img"></i>
          </div>
          <div class="introduction-text">
            <p>{{item.productName}}</p>
            <p class="description">
              <span>产品介绍：{{item.description}}</span>
            </p>
            <p v-if="item.link" class="link">
              官方旗舰店：
              <span v-html="item.link">  </span>
            </p>
          </div>
        </div>
        <div class="wares-details">
          <div class="shop-carousel">
            <el-carousel height="220px">
              <el-carousel-item v-for="attach in item.attachList.slice(0,10)" :key="attach.attachNo">
                <img v-if="attach.type === 'image'" class="shop-carousel-img" :src="getDownloadUrl(attach.attachNo)">
                <video v-else :src="getDownloadUrl(attach.attachNo)" class="shop-carousel-img"  controls="controls"/>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="extend-info">
            <el-button>
              <span>收藏</span>
            </el-button>
            <p v-if="item.preSaleTime" >
              预售时间：<span>{{item.preSaleTime.split('T')[0] + ' ' + item.preSaleTime.split('T')[1]}}</span>
            </p>
            <p v-if="item.preSalePrice">
              预售价格：<span>{{item.preSalePrice}}</span>
            </p>
          </div>
        </div>
      </el-card>
      <div>
        <div style="height: 50px"></div>
        <v-pagination
            :pagesize="pageParam.size"
            :total="pageTotal"
            :options="pageParam"
            :render="getWaresList"
        >
        </v-pagination>
      </div>
    </el-card>
  </el-card>
</template>

<script>
import vPagination from '@/components/pagination/Pagination'
import { queryWaresList } from '@/services/index/shop/shop'
const { downloadUrl } = require('@/script/util')
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'ShopHome',
  components: {
    vPagination
  },
  data () {
    return {
      isManage: true,
      waresList: [],
      pageParam: { // 配置对应的查询参数
        appTimeStart: '',
        appTimeEnd: '',
        page: 1,
        size: 10 // page第几页,size是一页几个
      },
      pageTotal: 0
    }
  },
  methods: {
    getWaresList () {
      const formData = {
        page: this.pageParam.page,
        pageSize: this.pageParam.size
      }
      const data = JSON.stringify(formData)
      queryWaresList(data).then((res) => {
        if (res.code !== 10000) {
          this.$message.error(res.explanation)
          return
        }
        this.pageTotal = res.data.pageTotal
        this.waresList = res.data.responseBody
      })
    },
    getDownloadUrl (url) {
      return downloadUrl + url
    }
  },
  created () {
    this.getWaresList()
  }
}
</script>

<style scoped lang="less">
@import "shopHome.less";
</style>
